<template>

    <div>
        <van-nav-bar :border="false">
            <template #right>
                <i class="iconfont icon-cuowu" @click="onClickRight"></i>
            </template>
        </van-nav-bar>

        <div class="box">
            <div class="box1">
                <div>
                    <img src="../../assets/images/login.jpg" alt="" class='iamge' >
                    <h3>Welcome to Dreame</h3>
                    <div>Create a free account to access terrific novels</div>
                </div>
            </div>
            <div class="box2">
                <div>
                    <h3 style="   padding-left: .5rem; padding-right: .5rem;">f</h3>
                    <p> Sign in with Facebook</p>
                </div>
                <div class="two">
                    <h3 style="   padding-left: .5rem; padding-right: .5rem;">G</h3>
                    <p> Sign in with Google</p>
                </div>
            </div>
        </div>
        <div class="mailbox">
            <div class="wires">
                <div class="wire"></div>
                <p>Other Login Methods</p>
                <div class="wire"></div>
            </div>
            <div class="garden">
                <i class="iconfont icon-youxiang"></i>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    methods: {
        onClickRight() {
            history.back();
        }
    }
}
</script>

<style lang="scss" scoped>
.box {
    width: 100%;
    height: 10rem;
    margin-top: .5rem;

    .box1 {
        width: 100%;
        height: 5rem;
        display: flex;

        justify-content: center;

        div {
            text-align: center;
            font-size: .4rem;

            .iamge {
                width: 5.5rem;
                height: 3.5rem;
                margin: auto;
            }
        }


    }

    .box2 {
        width: 100%;
        height: 4rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        div {
            width: 80%;
            height: 1.7rem;
            font-size: .5rem;
            border-radius: 0.1rem;
            display: flex;
            color: #fff;
            align-items: center;
            box-shadow: 1px 5px 10px -3px #cecece;
            background-color: #2150b7;
        }

        .two {
            background-color: #fff;
            color: #999bb1;

            h3 {
                background-image: linear-gradient(to right, #4286F3, #EB4537, #FAC230, #55AF7B);
                -webkit-background-clip: text;
                color: transparent;

            }
        }
    }
}

.mailbox {
    position: fixed;
    bottom: .4rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .wires {
        width: 100%;
        height: 1rem;
        font-size: .2rem;
        display: flex;

        justify-content: center;
        align-items: center;
        color: #cecece;


        .wire {
            width: 1rem;
            border: 0.032rem solid #cecece;
        }

        p {
            padding-left: .2rem;
            padding-right: .2rem;
        }
    }

    .garden {
        width: 1rem;
        height: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        border-radius: 50%;
        font-size: 1rem;
        background-color: #999bb1;
    }

}
</style>